/* static/admin/css/custom.css */
:root {
    --primary-color: #7DA7F9;
    --primary-dark: #5B8FF9;
    --primary-light: #9BBEFF;
    --secondary-color: #4B5563;
    --success-color: #10B981;
    --error-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #3B82F6;
    --light-gray: #F3F4F6;
    --medium-gray: #9CA3AF;
    --dark-gray: #1F2937;
}

/* 基础样式 */
body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-image: url('../images/background.jpg'); /* 确保图片存在于static/admin/images目录下 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #f8fafc;
    color: var(--dark-gray);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* 头部样式 */
#header {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 2rem;
    box-shadow: 0 2px 4px rgba(32, 61, 205, 0.1);
}

#header a:link, #header a:visited {
    color: white;
}

#header a:hover {
    color: white;
    text-decoration: underline;
}

/* 侧边栏样式 */
#nav-sidebar {
    background-color: white;
    border-right: 1px solid #e5e7eb;
    padding: 1rem 0;
}

#nav-sidebar .current-model {
    background-color: var(--primary-light);
}

#nav-sidebar .app-label {
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
}

#nav-sidebar .model-name {
    padding: 0.5rem 1.5rem;
}

#nav-sidebar .model-name a {
    color: var(--dark-gray);
}

#nav-sidebar .model-name a:hover {
    color: var(--primary-color);
}

/* 主内容区域样式 */
.content-wrapper {
    min-height: 100vh;
}

.module {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.module h2, .module caption, .inline-group h2 {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
}

table thead th {
    background-color: var(--primary-light);
    color: white;
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-weight: 600;
}

table tbody td {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

table tbody tr:nth-child(even) {
    background-color: rgba(69, 57, 228, 0.05);
}

table tbody tr:hover {
    background-color: rgba(125, 167, 249, 0.1);
    transition: background-color 0.2s;
}

/* 按钮样式 */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
}

.button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover {
    background-color: var(--primary-dark);
    color: white;
    text-decoration: none;
}

.button:active, input[type=submit]:active, input[type=button]:active, .submit-row input:active, a.button:active {
    background-color: var(--primary-dark);
}

.button.secondary, input[type=submit].secondary, input[type=button].secondary, .submit-row input.secondary, a.button.secondary {
    background-color: var(--secondary-color);
}

.button.secondary:hover, input[type=submit].secondary:hover, input[type=button].secondary:hover, .submit-row input.secondary:hover, a.button.secondary:hover {
    background-color: #4386f3;
}

.button.success, input[type=submit].success, input[type=button].success, .submit-row input.success, a.button.success {
    background-color: var(--success-color);
}

.button.success:hover, input[type=submit].success:hover, input[type=button].success:hover, .submit-row input.success:hover, a.button.success:hover {
    background-color: #059669;
}

.button.error, input[type=submit].error, input[type=button].error, .submit-row input.error, a.button.error {
    background-color: var(--error-color);
}

.button.error:hover, input[type=submit].error:hover, input[type=button].error:hover, .submit-row input.error:hover, a.button.error:hover {
    background-color: #DC2626;
}

/* 表单样式 */
.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: white;
    transition: border-color 0.2s;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(125, 167, 249, 0.25);
}

/* 分页样式 */
.paginator {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.paginator .this-page {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.paginator a {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: white;
    border: 1px solid #e5e7eb;
}

.paginator a:hover {
    background-color: var(--primary-light);
    color: white;
    border-color: var(--primary-light);
}

/* 消息通知样式 */
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 卡片组件样式 */
.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* 响应式布局 */
.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* static/admin/css/custom.css */
:root {
    border: #7DA7F9; /* 主色调：天蓝色 */
    --header-text-color: white; /* 头部文字颜色（自动适配） */
    --primary-color: #7DA7F9; /* 主色调 */
    --primary-dark: #7095df;  /* 主色调加深 */
    --primary-light: #aebede; /* 主色调变浅 */
    /* 其他颜色变量... */
}

/* 面包屑导航样式 */
div.breadcrumbs {
    background-color: var(--primary-dark); /* 使用主色调 */
    color: white;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

div.breadcrumbs a {
    color: white;
    text-decoration: none;
    transition: all 0.2s;
}

div.breadcrumbs a:hover {
    color: white;
    text-decoration: underline;
}

div.breadcrumbs a::after {
    content: "›";
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.7);
}

div.breadcrumbs a:last-child::after {
    content: ""; /* 最后一个链接不显示分隔符 */
}

div.breadcrumbs .current {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}
/* 覆盖默认头部背景色变量 */
:root {
    --header-bg: #7DA7F9; /* 主色调：天蓝色 */
    --header-text-color: white; /* 头部文字颜色（自动适配） */
}

/* 全局调整 Django 管理后台样式 */

/* 1. 投票主题等标题栏样式 */
.module h2,
fieldset legend {
    background-color: #7DA7F9 !important; 
    color: #fff; 
    border: none; 
    padding: 8px 12px; 
    font-weight: 600; /* 加粗文字 */
}

/* 2. 按钮样式优化（可选，保持主色调统一） */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background-color: #7DA7F9;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover {
    background-color: #5B8FF9; /*  hover 时加深主色调 */
}

/* 3. 表格及其他区域优化（可选） */
table {
    width: 100%;
    border-collapse: collapse;
}
table th, table td {
    border: 1px solid #e0e0e0;
    padding: 8px;
}
table th {
    background-color: #f8f9fa;
}

/* 4. 处理同色系关联区域（根据实际页面结构补充） */
.app-polls .module h2,
.nav-sidebar .current-app caption {
    background-color: #92b1ed !important;
    color: #fff;
}

/* 5. 响应式适配（可选） */
@media (max-width: 768px) {
    .module h2,
    fieldset legend {
        font-size: 14px;
        padding: 6px 10px;
    }
}

/* 保存按钮等操作按钮 */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    background-color: #7DA7F9;      /* 主色调 */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover {
    background-color: #5B8FF9;      /* 主色调加深 */
}

/* 默认按钮（保存按钮） */
.button.default,
.submit-row input.default {
    background-color: #7DA7F9;      /* 主色调 */
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button.default:hover,
.submit-row input.default:hover {
    background-color: #5B8FF9;      /* 主色调加深 */
}